<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>潮汕明珠 - 汕头 - 文化特色</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引用自定义样式 -->
    <link rel="stylesheet" href="style.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#D93A3E',
                        secondary: '#F2A359',
                        accent: '#3D8B37',
                        neutral: '#F5F5F5',
                        dark: '#2C3E50',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Noto Serif SC', 'Georgia', 'serif'],
                    },
                }
            }
        }
    </script>
</head>

<body class="bg-neutral font-sans text-dark scroll-smooth">
    <!-- 导航菜单 -->
    <header class="header shadow-md" style="background-color: #3182ce;">
        <div class="container mx-auto flex items-center justify-between py-2 px-4">
            <div class="flex items-center gap-4">
                <div class="logo">
                    <img src="image/logo2.jpg" width="60" height="60" class="rounded-lg shadow" alt="汕头logo">
                </div>
                <span class="text-white text-2xl font-bold tracking-wide drop-shadow">潮汕明珠 · 汕头</span>
            </div>
            <nav class="nav hidden md:flex gap-4 items-center">
                <a href="index.html" class="font-bold px-4 py-2 rounded shadow hover:bg-yellow-400 transition"
                    style="background-color: #3182ce; color: #fff;">首 页</a>
                <div class="dropdown relative">
                    <a href="index.html"
                        class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">家乡介绍 <i
                            class="fa fa-angle-down ml-1"></i></a>
                    <div class="dropdown-content absolute left-0 mt-2 bg-white rounded shadow-lg hidden group-hover:block z-20 min-w-[120px]">
                        <a href="history.html" class="block px-4 py-2 text-dark hover:bg-neutral">历史沿革</a>
                        <a href="culture.html" class="block px-4 py-2 text-dark hover:bg-neutral active">文化特色</a>
                    </div>
                </div>
                <div class="dropdown relative">
                    <a href="about.html"
                        class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">景点推荐 <i
                            class="fa fa-angle-down ml-1"></i></a>
                    <div class="dropdown-content absolute left-0 mt-2 bg-white rounded shadow-lg hidden group-hover:block z-20 min-w-[120px]">
                        <a href="dao.html#spot1" class="block px-4 py-2 text-dark hover:bg-neutral">南澳岛</a>
                        <a href="gy.html#spot2" class="block px-4 py-2 text-dark hover:bg-neutral">小公园</a>
                    </div>
                </div>
                <a href="gallery.html"
                    class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">特色美食</a>
                <a href="contact.html"
                    class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">传统文化</a>
                
            </nav>
            <!-- 移动端菜单按钮 -->
            <div class="caidan md:hidden text-white text-2xl cursor-pointer" id="menu-toggle">
                <i class="fa fa-bars"></i>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <nav class="nav-mobile md:hidden bg-primary px-4 py-2 hidden flex-col gap-2" id="mobile-menu">
            <a href="index.html"
                class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">首页</a>
            <a href="index.html"
                class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">家乡介绍</a>
            <a href="history.html" class="block px-4 py-2 text-white hover:bg-neutral">历史沿革</a>
            <a href="culture.html" class="block px-4 py-2 text-white hover:bg-neutral active">文化特色</a>
            <a href="about.html"
                class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">景点推荐</a>
            <a href="dao.html#spot1" class="block px-4 py-2 text-white hover:bg-neutral">南澳岛</a>
            <a href="gy.html#spot2" class="block px-4 py-2 text-white hover:bg-neutral">小公园</a>
            <a href="gallery.html"
                class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">特色美食</a>
            <a href="contact.html"
                class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">传统文化</a>
            
        </nav>
    </header>

    <!-- 文化特色内容 -->
    <section id="culture-content" class="py-20 bg-neutral">
        <div class="container mx-auto px-4">
            <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-primary mb-4">汕头文化特色</h2>
            <div class="w-20 h-1 bg-secondary mb-6"></div>

            <!-- 潮汕方言 -->
            <div class="mb-10">
                <h3 class="text-2xl font-bold text-primary mb-2">潮汕方言</h3>
                <p class="text-lg text-gray-600">
                    潮汕方言即潮汕话、潮州话，属汉语方言八大语系之一的闽南语系。它保留了很多古汉语的词汇和语音，具有独特的音韵和表达方式。潮汕话内部分歧不大，彼此都能顺利交流，因此虽然属于闽南语系，但与台湾话、厦门话等还是有一定区别。
                </p>
            </div>

            <!-- 潮汕音乐 -->
            <div class="mb-10">
                <h3 class="text-2xl font-bold text-primary mb-2">潮汕音乐</h3>
                <p class="text-lg text-gray-600">
                    潮汕音乐源远流长，是潮汕文化的重要组成部分。它包括弦诗乐、笛套古乐、细乐、庙堂音乐、潮汕大锣鼓等品种，旋律优美、节奏明快，具有浓郁的地方特色。潮汕音乐以其独特的演奏风格和艺术魅力，深受人们喜爱。
                </p>
                <!-- 潮阳塗库笛套音乐 -->
                <div class="mt-6">
                    <h4 class="text-xl font-bold text-primary mb-2">
                        <a href="https://v.douyin.com/t5rI2YWB0dY/" class="hover:text-secondary transition-colors">潮阳塗库笛套音乐</a>
                    </h4></h4>
                    <p class="text-lg text-gray-600">
                        潮阳塗库笛套音乐是潮汕音乐中的一颗璀璨明珠。它以笛为主奏乐器，融合了多种传统乐器的演奏，曲目丰富多样，既有古朴典雅的宫廷音乐风格，又有活泼欢快的民间音乐特色。塗库笛套音乐的演奏形式严谨规范，乐师们通过精湛的技艺，将每一个音符都演绎得细腻动人，仿佛能带领听众穿越时空，领略古代音乐的魅力。其传承与发展承载着潮阳地区的历史文化记忆，是当地人民珍贵的文化遗产。
                    </p>
                </div>
            </div>

            <!-- 潮汕民俗 -->
            <div class="mb-10">
                <h3 class="text-2xl font-bold text-primary mb-2">潮汕民俗</h3>
                <p class="text-lg text-gray-600">
                    潮汕地区民俗丰富，有营老爷、游神赛会、潮汕英歌舞等传统活动。营老爷是潮汕地区春节期间的一项重要民俗活动，人们抬着神像巡游，祈求新的一年风调雨顺、国泰民安。潮汕英歌舞则是一种融舞蹈、南拳套路、戏曲演技于一体的民间广场舞蹈，具有强烈的节奏感和视觉冲击力。
                </p>
                <!-- 潮阳英歌舞 -->
                <div class="mt-6">
                    <h4 class="text-xl font-bold text-primary mb-2"><a href="video/英歌.mp4"class="hover:text-secondary transition-colors">潮阳英歌舞</a></h4>
                    <p class="text-lg text-gray-600">
                        潮阳英歌舞是潮汕英歌舞中的杰出代表，有着悠久的历史和独特的艺术风格。它以梁山好汉为主题，舞者们身着色彩鲜艳的服饰，手持双棒，模仿梁山好汉的英姿进行表演。舞蹈动作刚劲有力、节奏明快，场面宏大壮观。英歌舞的表演不仅展现了力量之美，更蕴含着潮汕人民团结协作、勇往直前的精神。在重大节日或庆典活动中，潮阳英歌舞总是能吸引众多观众的目光，成为一道亮丽的风景线。
                    </p>
                </div>
            </div>

            <!-- 潮汕工艺 -->
            <div class="mb-10">
                <h3 class="text-2xl font-bold text-primary mb-2">潮汕工艺</h3>
                <p class="text-lg text-gray-600">
                    潮汕工艺精湛，种类繁多，其中木雕、石雕、陶瓷、潮绣等闻名遐迩。潮汕木雕以其细腻的刀法和精美的造型而著称，作品题材广泛，包括人物、花鸟、山水等。石雕则展现了潮汕工匠对石材的巧妙运用，雕刻出的作品栩栩如生。潮绣是潮汕地区的传统刺绣工艺，针法丰富多变，色彩鲜艳夺目，具有极高的艺术价值。
                </p>
            </div>
        </div>
    </section>

    <footer class="footer bg-dark text-white py-6 mt-10">
        <div class="container mx-auto text-center">
            <p>&copy; 2025 我的家乡. 保留所有权利.</p>
        </div>
    </footer>

    <!-- 移动端菜单脚本 -->
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            const menuToggle = document.getElementById('menu-toggle');
            const mobileMenu = document.getElementById('mobile-menu');
            menuToggle.addEventListener('click', function () {
                mobileMenu.classList.toggle('hidden');
            });

            // 下拉菜单显示
            document.querySelectorAll('.dropdown').forEach(function (drop) {
                drop.addEventListener('mouseenter', function () {
                    const content = drop.querySelector('.dropdown-content');
                    if (content) content.classList.remove('hidden');
                });
                drop.addEventListener('mouseleave', function () {
                    const content = drop.querySelector('.dropdown-content');
                    if (content) content.classList.add('hidden');
                });
            });
        });
    </script>
</body>

</html>